<div class="dashboard-wrapper">
    <div class="left-sidebar" style="margin-right: 0px;">

        <div class="row-fluid">
            <div class="span12">
                <div class="widget">
                    <div class="widget-header">
                        <div class="title">
                            Form nhập liệu
                        </div>

                    </div>
                    <div class="widget-body">

                        <form class="form-horizontal no-margin">
                            <div class="control-group">
                                <label for="name" class="control-label">
                                    Tên dự án
                                </label>
                                <div class="controls">
                                    <input value="Xây dựng cầu đường" type="text" placeholder="" class="span6" id="name" name="name">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="date_range1" class="control-label">
                                    Bắt đầu và kết thúc
                                </label>
                                <div class="controls">
                                    <div class="input-append">
                                        <input type="text" placeholder="15/02/2013  - 10/02/2013" class="date_picker" id="date_range1" name="date_range1">
                                        <span class="add-on btn date_picker">
                                            <i class="icon-calendar">
                                            </i>
                                        </span>
                                        &nbsp;
                                        &nbsp;
                                        <input style="margin-left: 10px;" type="text" placeholder="Ngân sách dự án theo tháng" >
                                        &nbsp;
                                        <select style="margin-left: 10px;">
                                            <option>
                                                Tháng 1
                                            </option>
                                            <option>
                                                Tháng 2
                                            </option>
                                            <option>
                                                Tháng 3
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-right: 0px;" class="left-sidebar">


                                <div class="row-fluid">
                                    <div class="span12">
                                        <div class="widget">
                                            <div class="widget-header">
                                                <div class="title">
                                                    Ngân sách dự án
                                                </div>
                                            </div>
                                            <div class="widget-body">
                                                <div class="example_alt_pagination" id="dt_example">
                                                    <div role="grid" class="dataTables_wrapper" id="data-table_wrapper">
                                                        <table id="data-table" class="table table-condensed table-striped table-hover table-bordered pull-left dataTable" aria-describedby="data-table_info">

                                                            <thead>
                                                                <tr role="row">
                                                                    <th class="hidden-phone sorting" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 100px;" aria-label="
                                                                        Tên nhóm vật tư
                                                                        : activate to sort column ascending">
                                                                        Tên nhóm vật tư
                                                                    </th>

                                                                    <th class="hidden-phone sorting" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 150px;" aria-label="
                                                                        Khối lượng duyệt
                                                                        : activate to sort column ascending">
                                                                        Khối lượng duyệt
                                                                    </th>


                                                                    <th class="hidden-phone sorting" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 150px;" aria-label="
                                                                        Đơn giá duyệt  
                                                                        : activate to sort column ascending">
                                                                        Đơn giá duyệt 
                                                                    </th>
                                                                    <th class="hidden-phone sorting" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 300px;" aria-label="
                                                                        Ghi chú  
                                                                        : activate to sort column ascending">
                                                                        Ghi chú 
                                                                    </th>

                                                                </tr>
                                                            </thead>

                                                            <tbody role="alert" aria-live="polite" aria-relevant="all">
                                                                <?php
                                                                for ($i = 0; $i <= 3; $i++) {
                                                                    ?>
                                                                    <tr class="odd">
                                                                        <td class="hidden-phone ">
                                                                            <div>
                                                                                <select id="stateAndCity"  class="span12">

                                                                                    <option selected="selected" value="">
                                                                                        Chọn nhóm vật tư
                                                                                    </option>

                                                                                    <option value="Bê tông">
                                                                                        Bê tông
                                                                                    </option> 
                                                                                    <option value="">
                                                                                        Gạch đá
                                                                                    </option>
                                                                                    <option value="">
                                                                                        Cát sạn
                                                                                    </option>
                                                                                    <option value="">
                                                                                        Xi măng
                                                                                    </option>
                                                                                    <option value="">
                                                                                        Vật tư
                                                                                    </option>
                                                                                </select>
                                                                            </div> 
                                                                        </td>

                                                                        <td class="hidden-phone ">
                                                                            <div>
                                                                                <input value="" type="text" placeholder="Nhập khối lượng duyêt..." class="span12" id="email1" name="address">
                                                                            </div> 
                                                                        </td>
                                                                        <td class="hidden-phone">
                                                                            <div>
                                                                                <input type="text" placeholder="Nhập đơn giá duyệt..." class="span12" value="" id="" name="">

                                                                            </div>
                                                                        </td>

                                                                        <td class="hidden-phone ">
                                                                            <div>
                                                                                <input type="text" placeholder="Ghi chú tại đây..." class="span12" value="" id="" name="">

                                                                            </div>

                                                                        </td>


                                                                    </tr>
                                                                    <?php
                                                                }
                                                                ?>
                                                                <tr>
                                                                    <td colspan="4" style="text-align: right;">
                                                                        <a href="#" style="margin-left: 5px;"    class="btn btn-info pull-right" type="submit">
                                                                            Thêm mới
                                                                        </a>
                                                                    </td>
                                                                </tr>


                                                            </tbody></table></div>
                                                    <div class="clearfix">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>




                            </div>
                            <div class="form-actions no-margin">

                                <button style="margin-left: 5px;" class="btn btn-info pull-right" type="submit">
                                    Sửa
                                </button>

                                <a href="du-an.html" class="btn btn-info pull-right" type="submit">
                                    Trở lại
                                </a>
                                <div class="clearfix">
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>

        </div>






    </div>

</div>

<script type="text/javascript">

    //Tooltip
    $('a').tooltip('hide');

    //Popover
    $('.popover-pop').popover('hide');

    //Collapse
    $('#myCollapsible').collapse({
        toggle: false
    })

    //Tabs
    $('.myTabBeauty a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    })

    //Dropdown
    $('.dropdown-toggle').dropdown();

    //wysihtml5
    $('#wysiwyg').wysihtml5();

    //Color picker
    $('.colorpicker').colorpicker();

    //Bootstrap Timepicker
    $('#timepicker1').timepicker();

    $('#timepicker2').timepicker({
        minuteStep: 1,
        secondStep: 5,
        showInputs: false,
        template: 'modal',
        modalBackdrop: true,
        showSeconds: true,
        showMeridian: false
    });

    $('#timepicker3').timepicker({
        minuteStep: 5,
        secondStep: 30,
        showInputs: false,
        showSeconds: true,
        showMeridian: false
    });


    //Time Picker Clockface Plugin
    $(function() {

        $('#time1').clockface({
            format: 'HH:mm',
            trigger: 'manual'
        });

        $('#toggle-btn').click(function(e) {
            e.stopPropagation();
            $('#time1').clockface('toggle');
        });

    });

    //Date picker
    $('.date_picker').daterangepicker({
        opens: 'right'
    });

    //Date Picker

    $('.report_range').daterangepicker({
        ranges: {
            'Today': ['today', 'today'],
            'Yesterday': ['yesterday', 'yesterday'],
            'Last 7 Days': [Date.today().add({
                    days: -6
                }), 'today'],
            'Last 30 Days': [Date.today().add({
                    days: -29
                }), 'today'],
            'This Month': [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],
            'Last Month': [Date.today().moveToFirstDayOfMonth().add({
                    months: -1
                }), Date.today().moveToFirstDayOfMonth().add({
                    days: -1
                })]
        },
        opens: 'right',
        format: 'MM/dd/yyyy',
        separator: ' to ',
        startDate: Date.today().add({
            days: -29
        }),
        endDate: Date.today(),
        minDate: '01/01/2012',
        maxDate: '12/31/2013',
        locale: {
            applyLabel: 'Submit',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom Range',
            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            firstDay: 1
        },
        showWeekNumbers: true,
        buttonClasses: ['btn-danger']
    },
    function(start, end) {
        $('.report_range span').html(start.toString('MMMM d, yyyy') + ' - ' + end.toString('MMMM d, yyyy'));
    });

    //Set the initial state of the picker label
    $('.report_range span').html(Date.today().add({
        days: -29
    }).toString('MMMM d, yyyy') + ' - ' + Date.today().toString('MMMM d, yyyy'));


    //Wizard Progressbar

    $('#inverse').bootstrapWizard({
        'tabClass': 'nav',
        'debug': false,
        onShow: function(tab, navigation, index) {
            console.log('onShow');
        },
        onNext: function(tab, navigation, index) {
            console.log('onNext');
            if (index == 2) {
                // Make sure we entered the name
                if (!$('#name').val()) {
                    alert('You must enter your name');
                    $('#name').focus();
                    return false;
                }
            }

            // Set the name for the next tab
            $('#inverse-tab3').html('Hello, ' + $('#name').val());

        },
        onPrevious: function(tab, navigation, index) {
            console.log('onPrevious');
        },
        onLast: function(tab, navigation, index) {
            console.log('onLast');
        },
        onTabClick: function(tab, navigation, index) {
            console.log('onTabClick');
            alert('on tab click disabled');
            return false;
        },
        onTabShow: function(tab, navigation, index) {
            console.log('onTabShow');
            var $total = navigation.find('li').length;
            var $current = index + 1;
            var $percent = ($current / $total) * 100;
            $('#inverse').find('.bar').css({
                width: $percent + '%'
            });
        }
    });


    //Wizard Progressbar tabs left

    $('#tabsleft').bootstrapWizard({
        'tabClass': 'nav nav-tabs',
        'debug': false,
        onShow: function(tab, navigation, index) {
            console.log('onShow');
        },
        onNext: function(tab, navigation, index) {
            console.log('onNext');
        },
        onPrevious: function(tab, navigation, index) {
            console.log('onPrevious');
        },
        onLast: function(tab, navigation, index) {
            console.log('onLast');
        },
        onTabClick: function(tab, navigation, index) {
            console.log('onTabClick');

        },
        onTabShow: function(tab, navigation, index) {
            console.log('onTabShow');
            var $total = navigation.find('li').length;
            var $current = index + 1;
            var $percent = ($current / $total) * 100;
            $('#tabsleft').find('.bar').css({
                width: $percent + '%'
            });

            // If it's the last tab then hide the last button and show the finish instead
            if ($current >= $total) {
                $('#tabsleft').find('.pager .next').hide();
                $('#tabsleft').find('.pager .finish').show();
                $('#tabsleft').find('.pager .finish').removeClass('disabled');
            } else {
                $('#tabsleft').find('.pager .next').show();
                $('#tabsleft').find('.pager .finish').hide();
            }

        }
    });


    $('#tabsleft .finish').click(function() {
        alert('Finished!, Starting over!');
        $('#tabsleft').find("a[href*='tabsleft-tab1']").trigger('click');
    });
</script>